<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>员工出差管理系统</h1>
<form th:action="@{/list}" method="get">
    <select name="tripModeId">
        <option value="0">——请选择——</option>
        <option th:each="tripModeIds : ${tripModeId}" th:value="${tripModeIds.id}" th:text="${tripModeIds.name}"></option>
    </select>
    <input type="submit" value="查询"/>
    <input type="button" th:onclick="'location.href=\'/toAdd\''" value="添加"/>
</form>


<table border="1">
    <tr>
        <td>出差人员</td>
        <td>职位</td>
        <td>出行方式</td>
        <td>出行日期</td>
        <td>行程状态</td>
        <td>操作</td>
    </tr>
    <tr th:each=" Schedule : ${list}">
        <td>[[${Schedule.userName}]]</td>
        <td>[[${Schedule.duty}]]</td>
        <td>
            <span th:if="${Schedule.tripModeId==1}">公共交通</span>
            <span th:if="${Schedule.tripModeId==2}">高铁</span>
            <span th:if="${Schedule.tripModeId==3}">飞机</span>
            <span th:if="${Schedule.tripModeId==4}">公司派车</span>
            <span th:if="${Schedule.tripModeId==5}">自驾</span>
            <span th:if="${Schedule.tripModeId==5}">其他</span>
        </td>
        <td th:text="${#dates.format(Schedule.departTime,'yyyy-MM-dd')}"></td>
        <td><span th:if="${Schedule.status==0}">未出行</span>
            <span th:if="${Schedule.status==1}">已取消</span>
        </td>

        <td>
    <span th:if="${Schedule.status==0}">
        <a href="javascript:void(0);" th:attr="onclick='Deactivated('+${Schedule.id}+');'">取消行程</a>
    </span>
            <span th:if="${Schedule.status==1}">
        <a href="javascript:void(0);" th:attr="onclick='enable('+${Schedule.id}+');'">已取消</a>
    </span>
        </td>
    </tr>
    </c:forEach>
</table>
</body>
<script src="/js/jquery.js"></script>
<script>
    $(function () {
        $("tr:odd").css("background-color", "#fff")
        $("tr:even").css("background-color", "aquamarine")
        $("tr:eq(0)").css("background-color", "aqua")
    })

    function updateSchedule(id, status, successMessage, failureMessage) {
        $.ajax({
            type: "POST",
            url: "/update",
            data: JSON.stringify({id: id, status: status}),
            contentType: "application/json",
            success: function(response) {
                alert(successMessage);
                location.reload();
            },
            error: function(response) {
                alert(failureMessage);
            }
        });
    }

    function Deactivated(id) {
        updateSchedule(id, 0, "已取消成功", "已取消失败");
    }

    function enable(id) {
        updateSchedule(id, 1, "取消行程成功", "取消行程失败");
    }
</script>
</html>